{% extends "base.html" %}
{% block content %}
<div class="text-center">
    <h1 class="mb-4">图像加密与分析</h1>
    <form method="POST" enctype="multipart/form-data" id="upload-form" class="mb-4">
        <div class="mb-3">
            <label for="file" class="form-label">选择图像文件:</label>
            <input type="file" class="form-control" name="file" id="file" required>
        </div>
        <div class="mb-3 text-muted small">
            如果选择图像文件后无响应，请刷新界面重新尝试!
        </div>
        <div class="mb-3">
            <label for="key" class="form-label">输入密钥种子（不超过21位的二进制数）:</label>
            <input type="text" class="form-control" name="key" id="key" required placeholder="请输入密钥（LFSR需为不超过21位的二进制字符串）">
        </div>
        <button type="button" id="encrypt-button" class="btn btn-primary" style="display: none;">加密与分析</button>
    </form>

    <!-- 显示上传的图片和图像类型 -->
    <div id="image-preview" class="mt-4 d-flex flex-column align-items-center">
        <h2>上传的图片</h2>
        <img id="preview-image" src="#" alt="预览图像" class="img-fluid mb-3 rounded" style="max-width: 300px; display: none; cursor: pointer;">
        <p id="image-type" class="text-muted"></p>
        <!-- 加密失败提示 -->
        <div id="error-message" class="alert alert-danger mt-3" style="display: none;"></div>
        <!-- 加载提示 -->
        <div id="loading-spinner" class="spinner-border text-primary mt-3" role="status" style="display: none;">
            <span class="visually-hidden">加载中...</span>
        </div>
    </div>
</div>

<!-- 图片放大容器 -->
<div id="image-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 1000; justify-content: center; align-items: center;">
    <img id="zoomed-image" src="#" alt="放大图像" style="max-width: 90%; max-height: 90%;">
</div>

<script>
    document.getElementById('file').addEventListener('change', function (event) {
        const fileInput = document.getElementById('file');
        const keyInput = document.getElementById('key');
        const file = fileInput.files[0];

        if (!file) {
            alert('请选择文件');
            return;
        }

        // 检查文件类型
        const fileExtension = file.name.split('.').pop().toLowerCase();
        const allowedExtensions = new Set(['png', 'jpg', 'jpeg']);
        if (!allowedExtensions.has(fileExtension)) {
            alert('不支持的文件类型，请上传PNG、JPG或JPEG格式的图像。');
            fileInput.value = '';
            return;
        }

        // 检查密钥是否为有效的二进制字符串（仅适用于LFSR）
        const key = keyInput.value;
        if (!/^[01]{0,21}$/.test(key)) {
            alert('LFSR密钥必须为不超过21位的二进制字符串（仅包含0和1）');
            return;
        }

        // 自动用0填充到21位（仅适用于LFSR）
        if (key.length < 21) {
            keyInput.value = key.padStart(21, '0');
        }

        // 创建FormData对象
        const formData = new FormData();
        formData.append('file', file);
        formData.append('key', keyInput.value);

        // 显示加载提示
        const imageType = document.getElementById('image-type');
        const loadingSpinner = document.getElementById('loading-spinner');
        imageType.textContent = '上传中...';
        loadingSpinner.style.display = 'block';

        // 发送AJAX请求
        fetch('/', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 显示上传的图片
                const img = document.getElementById('preview-image');
                img.src = URL.createObjectURL(file);
                img.style.display = 'block';

                // 显示图像类型
                let typeMessage = `图像类型: ${data.image_type}`;
                if (data.original_mode === 'P') {
                    typeMessage += `（原始模式: ${data.original_mode}, 转换后模式: ${data.converted_mode}）`;
                }
                imageType.textContent = typeMessage;

                // 显示“加密与分析”按钮
                document.getElementById('encrypt-button').style.display = 'inline-block';
            } else {
                alert(data.message || '上传失败');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('上传失败，请重试');
        })
        .finally(() => {
            // 隐藏加载提示
            loadingSpinner.style.display = 'none';
        });
    });

    document.getElementById('encrypt-button').addEventListener('click', function () {
        const fileInput = document.getElementById('file');
        const keyInput = document.getElementById('key');
        const file = fileInput.files[0];

        if (!file) {
            alert('请选择文件');
            return;
        }

        // 检查密钥是否为有效的二进制字符串（仅适用于LFSR）
        const key = keyInput.value;
        if (!/^[01]{0,21}$/.test(key)) {
            alert('LFSR密钥必须为不超过21位的二进制字符串（仅包含0和1）');
            return;
        }

        // 检查密钥是否全为0
        if (/^0+$/.test(key)) {
            alert('密钥种子不能全为0，请输入至少包含一个1的二进制字符串。');
            return;
        }

        // 自动用0填充到21位（仅适用于LFSR）
        if (key.length < 21) {
            keyInput.value = key.padStart(21, '0');
        }

        // 创建FormData对象
        const formData = new FormData();
        formData.append('file', file);
        formData.append('key', keyInput.value);

        // 显示加载提示
        const imageType = document.getElementById('image-type');
        const loadingSpinner = document.getElementById('loading-spinner');
        imageType.textContent = '加密与分析中...';
        loadingSpinner.style.display = 'block';

        // 隐藏错误提示
        const errorMessage = document.getElementById('error-message');
        errorMessage.style.display = 'none';

        // 发送AJAX请求
        fetch('/encrypt', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 跳转到result界面
                window.location.href = '/result';
            } else {
                // 显示错误提示
                errorMessage.textContent = data.message || '加密与分析失败，请检查输入并重试。';
                errorMessage.style.display = 'block';

                // 恢复界面状态
                imageType.textContent = `图像类型: ${data.image_type || '未知'}`;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            // 显示错误提示
            errorMessage.textContent = '加密与分析失败，请检查网络连接并重试。';
            errorMessage.style.display = 'block';

            // 恢复界面状态
            imageType.textContent = `图像类型: ${data.image_type || '未知'}`;
        })
        .finally(() => {
            // 隐藏加载提示
            loadingSpinner.style.display = 'none';
        });
    });

    // 点击图片放大功能
    document.getElementById('preview-image').addEventListener('click', function () {
        const zoomedImage = document.getElementById('zoomed-image');
        const imageOverlay = document.getElementById('image-overlay');
        zoomedImage.src = this.src;
        imageOverlay.style.display = 'flex';
    });

    // 点击放大后的图片或背景关闭放大功能
    document.getElementById('image-overlay').addEventListener('click', function () {
        this.style.display = 'none';
    });
</script>
{% endblock %}
